<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    {{ }} 我们称之为 vuejs 提供的插值表达式，可以把 vuejs 管理的 data 的数据插入到 使用的地方。
</div>
<div>
    {{ }} 里面到底可以写哪些内容？
</div>
<p>
    1. 可以写 data 里面的数据
</p>
<p>
    2. 可以直接写 字面量数据
</p>
<p>
    3. 可以进行条件表达式
</p>
<p>
    4. 可以进行三目运算
</p>
<p>
    5. 系统函数的调用
</p>

<div id="app">
    <h2>{{ title }}</h2>
    <hr>
    <h2>1. 字面量的使用</h2>
    <p>{{ 12 }}</p>
    <p>{{ '我是插值表达式里面的字符串' }}</p>
    <p>{{ true }}</p>
    <p>{{ [12, 23, 34] }}</p>
    <p>{{ { id: 1, name: 'andy', age: 23} }}</p>
    <hr>
    <h2>2. vuejs 里面 data里面的值</h2>
    <p>{{ m }}</p>
    <p>{{ n }}</p>
    <p>{{ age }}</p>
    <p>{{ isAdult }}</p>
    <p>{{ arr }}</p>
    <p>{{ obj }}</p>
    <p>{{ list }}</p>
    <hr>
    <h2>3. 还可以进行条件表达式使用</h2>
    <p>{{ m > n }}</p>
    <p>{{ age > 18 ? '已经成年了' : '未成年'}}</p>
    <hr>
    <h2>4. 四则运算</h2>
    <p>{{ m + n }}</p>
    <p>{{ m - n }}</p>
    <p>{{ m / n }}</p>
    <p>{{ m * n }}</p>
    <p>{{ m % n }}</p>
    <p>+ 可以做加法，也可以做字符串的拼接</p>
    <p>{{ '我是字符串1' + ' 我是字符串2'  }}</p>
    <p>{{ '我是字符串1' + title  }}</p>
    <hr>
    <h2>5. 系统函数的调用</h2>
    <p>{{ 12.23 }}</p>
    <p>{{ parseInt( 12.2345 )  }}</p>
    <p>{{ Math.random() }}</p>

    <hr>
    <p>问题的思考：在做数据展示的时候，如果是基本数据类型
    我们可以使用插值表达式进行展示，但是对于复合数据类型，我们在做
        展示的时候，更多的是单个展示或者是进行遍历展示？
    </p>

</div>


</body>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({
        // el 是一个选择器，这里使用的 #app 就是第二步定义的 vuejs 管理区域的 id选择器
        el: '#app',

        // vuejs 管理的数据
        data: {
            // 基本数据类型
            title: 'vuejs 入门使用',
            m: 12,
            n: 23,
            age: 13,
            isAdult: false,

            // 复合数据类型（对象类型）
            arr: [2, 23, 34],
            obj: {id: 12, name: 'mark', age: 23},
            list: [
                {id: 12, name: 'mark', age: 23},
                {id: 13, name: 'andy', age: 24},
            ]
        }
    })

    console.log(vm);


</script>

</html>
